<template>
  <div class="div">
    <Header4 title="待付款"></Header4>

    <div v-for="(item,index) in list" :key="index" class="dadiv">
      <div class="divbt">
        <font class="font1">{{item.time}}</font>
        <font class="font2">{{item.state}}</font>
      </div>
      <div class="spqddiv" v-for="(item2,index2) in list2" :key="index2">
        <div v-if="item.time==item2.time">
          <img
            class="spqdimg"
            :src="poot+'miaozishangchengFile/commodity/'+item2.name+'/'+item2.name+' '+item2.colour+'.jpg'"
          />
          <div class="spqdfont">
            <font class="ft">{{item2.name}}</font>&nbsp;&nbsp;&nbsp;
            <font class="number">x{{item2.number}}</font>
            <br />
            <font class="fm">{{item2.memory}}&nbsp;&nbsp;&nbsp;{{item2.colour}}</font>
            <font class="fj">￥{{item2.price}}</font>
            <van-divider
              contentPosition="center"
              customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
            ></van-divider>
          </div>
        </div>
      </div>

      <div class="divjiage">
        <font class="font3">
          共计{{shangpingjianshu.split(",")[index]}}件商品 &nbsp;&nbsp;&nbsp; 实付金额
          <font
            class="font1"
          >￥{{item.actualamountpaid}}</font>
        </font>
      </div>
      <div class="anlv">
        <van-button
          plain
          hairline
          type="primary"
          size="mini"
          color="rgba(56, 47, 47, 0.432)"
          @click="shangchudd(index)"
        >删除订单</van-button>
        <van-button
          plain
          hairline
          type="info"
          size="mini"
          color="rgb(255, 102, 0)"
          @click="sdpj(item.time)"
        >立即付款</van-button>
      </div>
      <van-divider
        contentPosition="center"
        customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
      ></van-divider>
    </div>
  </div>
</template>
<script>
import Header4 from "@/components/Headergl/Header4";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      list: [],
      list2: [],
      shangpingjianshu: ""
    };
  },
  components: {
    Header4: Header4
  },
  computed: {
    ...mapState(["zhuantai"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  methods: {
    ...mapMutations(["xg"]),
    shangchudd(num) {
      this.$http
        .get(
          this.poot +
            "deleteorder/" +
            this.list[num].time +
            "/" +
            this.list[num].user
        )
        .then(response => {
          this.chushuhuadd();
        })
        .catch(function(error) {});
    },
    sdpj(num) {
      this.$router.push("/pingjia/" + num);
      this.xg(true);
    },
    chushuhuadd() {
      this.$http
        .get(this.poot + "selectorderByuser/" + this.user)
        .then(response => {
          console.log(response.data);
          this.list = response.data;
          this.chushuhuadd2();
        })
        .catch(function(error) {
          console.log(error);
          // this.$toast("获取数据失败");
        });
    },
    chushuhuadd2() {
      this.$http
        .get(this.poot + "selectorderitemByuser/" + this.user)
        .then(response => {
          console.log(response.data);
          this.list2 = response.data;
          this.chushuhuadd3();
        })
        .catch(function(error) {
          console.log(error);
          // this.$toast("获取数据失败");
        });
    },
    chushuhuadd3() {
      for (var i = 0; i < this.list.length; i++) {
        var int = 0;
        for (var j = 0; j < this.list2.length; j++) {
          if (this.list[i].time == this.list2[j].time) {
            int += this.list2[j].number;
          }
        }
        this.shangpingjianshu += int + ",";
    
      }
    }
  },
  mounted() {
    this.chushuhuadd();
  }
};
</script>
<style scoped>
.number {
  font-size: 5px;
  color: rgb(172, 166, 166);
}
.van-button {
  margin-right: 10px;
}
.anlv {
  text-align: right;
  margin-top: 5px;
}
.dadiv {
  margin-top: 10px;
}
.divjiage {
  margin-top: 10px;
  margin-left: 50px;
  font-size: 5px;
  color: rgba(56, 47, 47, 0.432);
}
.div {
  margin-top: 50px;
}
.divbt {
  text-align: left;
}
.font1 {
  margin-left: 10px;
  font-size: 3px;
  color: rgba(56, 47, 47, 0.432);
}
.font2 {
  margin-left: 45%;
  font-size: 10px;
  color: rgb(255, 102, 0);
}
.font3 {
  color: #000;
  font-size: 3px;
}
.spqdfont {
  height: 40px;
  margin-left: 25%;
}
.spqdimg {
  height: 50px;
  width: 50px;
  float: left;
}
.spqddiv {
  margin-top: 15px;
  text-align: left;
  margin-left: 20px;
}

.ft {
  font-size: 15px;
}
.fm {
  font-size: 5px;
}
.fj {
  color: red;
}
</style>